<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
</head>
<body  >
<div>
	<p class="message"></p>

	<div>
		<button id="connect" onclick="connect();">Connect</button>
		<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
	</div>
	<div id="conversationDiv">
		<p>
			<label>notice content?</label>
		</p>
		<p>
			<textarea id="name" rows="5"></textarea>
		</p>
		<button id="sendName" onclick="sendName();">Send</button>
		<p id="response"></p>
	</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script type="text/javascript" src="stomp.js"></script>
<script type="text/javascript">
	var stompClient = null;
	function setConnected(connected) {
		document.getElementById('connect').disabled = connected;
		document.getElementById('disconnect').disabled = !connected;
		document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
		document.getElementById('response').innerHTML = '';
	}
	// 开启socket连接
	function connect() {
		var socket = new SockJS('/socket');
		stompClient = Stomp.over(socket);
		stompClient.connect({}, function (frame) {
			setConnected(true);
		});
	}
	// 断开socket连接
	function disconnect() {
		if (stompClient != null) {
			stompClient.disconnect();
		}
		setConnected(false);
		console.log("Disconnected");
	}
	// 向‘/app/change-notice’服务端发送消息
	function sendName() {
		var value = document.getElementById('name').value;
		stompClient.send("/app/change-notice", {}, value);
	}
	connect();
</script>
<script type="text/javascript">
	var noticeSocket = function () {
		var s = new SockJS('/socket');
		var stompClient = Stomp.over(s);
		stompClient.connect({}, function () {
			console.log('notice socket connected!');
			stompClient.subscribe('/topic/notice', function (data) {
				$('.message').html(data.body);
			});
		});
	};
	noticeSocket();
</script>
</body>
</html>